@use 'colors';
@use 'z-index';

$header_shadow:
    0 4px 5px 0 colors.$black-14,
    0 1px 10px 0 colors.$black-12,
    0 2px 4px -1px colors.$black-20;
$header_height: 64px;
$small_header_height: 48px;
$button_height: 36px;
$button_hover_transition: background-color 0.15s;

.GeoGebraFrame {

	.headerView {
	    height: $header_height;
	    line-height: $header_height;
	    position: relative;
		top: 0px;
		left: 0px;
		width: 100%;
		background-color: white;
		box-shadow: $header_shadow;
		z-index: z-index.$z-open-file-view-header;
		
		.headerBackButton {
			cursor: pointer;
			width: 24px;
			height: 24px;
			opacity: 0.54;
			padding: 8px 12px;
			margin: auto 12px;
			&:hover {
				opacity: 0.87;
			}
			.gwt-Image {
			    vertical-align: middle;
			}
		}
		.headerCaption {
            display: inline-block;
        	font-size: 125%;
        	vertical-align: middle;
        	color: colors.$text-primary;
        	letter-spacing: 0.25px;
        }
        > .headerCaption:first-child {
            margin-left: 16px;
        }
	}

	%compactHeaderViewShared {
        .headerBackButton {
            vertical-align: middle;
            padding: 8px 8px;
            margin: auto 4px;
        }
        .headerCaption {
            margin: 0px;
        }
    }

	.smallHeaderView {
        @extend %compactHeaderViewShared;
    	height: $small_header_height;
        line-height: $small_header_height;
        .headerBackButton {
            margin-left: 8px;
            margin-right: 24px;
        }
    }

    .droppedHeaderView {
        box-shadow: none;
    }

    .compactHeaderView {
        @extend %compactHeaderViewShared;
        .headerCaption {
            font-size: 112.5%;
        }
        .headerBackButton {
            margin: auto 8px;
        }
    }
}
